/*
 * @Description:
 * @Author: cgt
 * @Date: 2021-12-23 14:05:56
 * @LastEditors: cgt
 * @LastEditTime: 2021-12-28 18:40:23
 */
/**
 * 闪烁点
 * @igonre
 */
class FlashPointObject {
  constructor(size, map) {
    this.map = map;
    this.size = size;
    this.width = size;
    this.height = size;
    this.data = new Uint8Array(size * size * 4);
  }

  onAdd() {
    let canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    this.context = canvas.getContext('2d');
  }

  /**
   * 图像绘制方法
   * @desc 循环调用，绘制一帧动画，绘制完成后调用地图重绘方法，绘制下一帧，形成动画效果
   */
  render() {
    let duration = 1000;
    let t = performance.now() % duration / duration;

    let radius = this.size / 2 * 0.3;
    let outerRadius = this.size / 2 * 0.7 * t + radius;
    let context = this.context;

    // 绘制外圈圆
    context.clearRect(0, 0, this.width, this.height);
    context.beginPath();
    context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
    context.fillStyle = 'rgba(255, 200, 200, ' + (1 - t) + ')';
    context.fill();

    // 绘制内圈圆
    context.beginPath();
    context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
    context.fillStyle = 'rgba(255, 100, 100, 1)';
    context.strokeStyle = 'white';
    context.lineWidth = 2 + 4 * (1 - t);
    context.fill();
    context.stroke();

    // 更新图片数据
    this.data = context.getImageData(0, 0, this.width, this.height).data;

    // 调用地图重绘方法，加载下一帧动画
    this.map.triggerRepaint();

    // 返回true表示图片刷新完成
    return true;
  }
}

export default FlashPointObject;
